<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 
        第二种CSS
            写到head-  style 标签里
            可以同时控制多个标签
            -  只能对一个网页起作用
            - 
     -->
     <!-- <style>
         p{color: green; font-size: 50px;}
     </style> -->

     <!-- 
         第三种CSS
            外部样式表
            需要引入 link
            可控制多个网页
            - 可以使用浏览器的缓存机制
            - 从而加快网页的加载速度 提升体验
      -->
      <link rel="stylesheet" href="./style.css">
</head>
<body>
    
    <!-- 
        网页三部分
            结构（html
            表现（css
            行为（JavaScript
        CSS
            - 层叠样式表
            - 网页实际是多层结构，通过css 设置
            - 只能看到上面的一层
            - CSS样式
     -->

     <!-- 
         第一种CSS
            style - 第一种行内样式
            行内样式真能影响一个标签
            注意： - 开发时不能使用内联式
      -->
</body>

    <p style="color: red; font-size: 60px;" >床前明月光，疑是地上霜</p>
    <p >床前明月光，疑是地上霜</p>
    <p >床前明月光，疑是地上霜</p>


</html>